import React, { useEffect, useState } from 'react';
import { Card, Divider, Form, Spin, Input } from 'antd';
import { hideSalaryTable } from '@/utils/utils';
import { withRouter } from 'umi';
import styles from './index.less';
import { PostBasicInfo, PostSalaryRef } from './components/PostForm';
import { getPostApplyData } from './service';

const doubleStyle = {
    labelCol: {
        xs: 6
    },
    wrapperCol: {
        xs: 18
    }
};
const singleStyle = {
    labelCol: {
        xs: 3
    },
    wrapperCol: {
        xs: 21
    }
};

const OPERATION_TYPE = {
    0: '新增',
    1: '修改',
    2: '删除'
};

// 职位申请
const PostApply = ({ form, id, reason }) => {
    const [basicInfo, setBasicInfo] = useState({}); // 基础信息
    // const [authInfo, setAuthInfo] = useState([]); // 权限
    // const [seniorUpdateContent, setSeniorUpdateContent] = useState({});
    const [detailLoading, setDetailLoading] = useState(false);
    const [operationType, setOperationType] = useState(null);

    const [commProps, setCommProps] = useState({
        form,
        disabled: true,
        doubleStyle,
        singleStyle
    });

    const fetchPostApplyData = async bid => {
        const { code, data } = await getPostApplyData(bid);
        setDetailLoading(true);
        if (code === 10000 && data) {
            const {
                firstPositionCode,
                rankCode,
                secondPositionCode,
                positionName,
                positionValue,
                positionDescription,
                // menuList,
                compareDataField,
                oldBusinessData,
                operationType: oType
            } = data;
            // console.log('===============================================>data', data);
            setOperationType(oType);
            setCommProps({ ...commProps });

            // // 权限列表
            // if (menuList) {
            //     setAuthInfo(menuList.split(',').map(v => parseInt(v, 10)));
            // }

            // 基础信息 差异数据
            const basicInfoTips = {};
            if (compareDataField?.updateFieldNames) {
                compareDataField.updateFieldNames.forEach(v => {
                    basicInfoTips[v] = oldBusinessData[v];
                });
            }

            // 差异对比
            // setSeniorUpdateContent(compareDataField.seniorUpdateContent || {});

            const arr = positionValue.split('.');

            // 基础信息
            setBasicInfo({
                rankCodeName: arr.length > 0 ? arr[arr.length - 1] : '',
                firstPositionCode,
                secondPositionCode,
                positionName,
                positionValue,
                positionDescription,
                rankCode,
                // rankName: arr.length > 0 ? arr[arr.length - 1] : '',
                tips: basicInfoTips
            });
        }
        setDetailLoading(false);
    };

    useEffect(() => {
        if (id) {
            fetchPostApplyData(id);
        }
    }, [id]);

    return (
        <>
            <Card bordered={false}>
                <div style={{ position: 'relative' }}>
                    <div className={styles.formIntro}>
                        {OPERATION_TYPE[operationType]}职位申请
                        <div className={styles.info}>以下是职位详情，请审阅</div>
                    </div>
                    <Spin spinning={detailLoading}>
                        <Form layout="horizontal" className={styles.postEdit}>
                            <Form.Item label="申请原因" required {...singleStyle}>
                                {form.getFieldDecorator('reason', {
                                    initialValue: reason,
                                    rules: [
                                        {
                                            required: true,
                                            message: '申请原因不能为空'
                                        },
                                        {
                                            max: 500,
                                            message: '字符不能超过500个'
                                        }
                                    ]
                                })(
                                    <Input.TextArea
                                        placeholder="请输入申请原因"
                                        style={{ height: '100px' }}
                                        disabled={reason}
                                        maxLength={500}
                                    />
                                )}
                            </Form.Item>
                            <PostBasicInfo dataSource={basicInfo} {...commProps} />
                            {/* <Divider />
                            <PostAuth list={authInfo} form={form} {...commProps} modify={seniorUpdateContent} />
                            <Divider /> */}
                            {!hideSalaryTable && (
                                <>
                                    <Divider />
                                    <PostSalaryRef f form={form} />
                                </>
                            )}
                            <Form.Item style={{ display: 'none' }}>
                                {form.getFieldDecorator('id', { initialValue: id })(<Input />)}
                            </Form.Item>
                            <Form.Item style={{ display: 'none' }}>
                                {form.getFieldDecorator('rankCode', { initialValue: basicInfo.rankCode })(<Input />)}
                            </Form.Item>
                            <Form.Item style={{ display: 'none' }}>
                                {form.getFieldDecorator('rankCodeName', { initialValue: basicInfo.rankCodeName })(
                                    <Input />
                                )}
                            </Form.Item>
                            <Form.Item style={{ display: 'none' }}>
                                {form.getFieldDecorator('positionName', { initialValue: basicInfo.positionName })(
                                    <Input />
                                )}
                            </Form.Item>
                            <Form.Item style={{ display: 'none' }}>
                                {form.getFieldDecorator('operationType', {
                                    initialValue: OPERATION_TYPE[operationType]
                                })(<Input />)}
                            </Form.Item>
                        </Form>
                    </Spin>
                </div>
            </Card>
            <Divider style={{ margin: '32px 0' }} />
        </>
    );
};

export default withRouter(PostApply);
